<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>登录</title>
    <script src="./img/font/iconfont.js"></script>
    <script src="./img/font3/iconfont.js"></script>
    <link rel="stylesheet" href="./index.css">
    <style>
        .sou{
            display: flex;
            margin-top: 5vw;
            margin-left: 2vw;
            padding-bottom: 2vw;
            border-bottom: 1px solid #eee;
        }
        .sou>a>svg{
            font-weight: bold;
            font-size: 7vw;
        }
        .sou>div{
            display: flex;
            background-color: #eee;
            margin-left: 2vw;
        }
        .sou>div>svg{
            padding-top: 1vw;
            padding-left: 3vw;
            font-size: 5vw;
            font-weight: bold;
            color: #aaa;
        }
        #search{
            border: none;
            outline: none;
            width: 70vw;
            margin-left: 1vw;
            background-color: #eee;
            font-size: 3vw;
        }
        .rmss{
            border-top: 1px solid #eee;
            width: 100%;
        }
        .rmss>h3{
            padding-left: 3vw;
            margin-top: 5vw;
        }
        .rmss>.zy{
            display: flex;
            flex-wrap: wrap;
        }
        .rmss>.zy a{
            display: flex;
        }
        .rmss>.zy>div{
            display: flex;
            margin-left: 3vw;
            width: 47%;
            margin-top: 5vw;
        }
        .zy a>p{
            font-size: 4vw;
        }
        .zy a>p:nth-child(1){
            color: #aaa;
        }
        .zy a>p:nth-child(2){
            padding-left: 2vw;
        }
        .zy>div:nth-child(1) p:nth-child(1){
            color: coral;
        }
        .zy>div:nth-child(2) p:nth-child(1){
            color: fuchsia;
        }
        .zy>div:nth-child(3) p:nth-child(1){
            color: lightskyblue;
        }
        .zy>div:nth-child(4) p:nth-child(1){
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="sou">
        <a href="./index.html">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huitui"></use>
            </svg>
        </a>
        <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
            <input type="search" id="search" name="search" placeholder="输入搜索内容">
        </div>
    </div>
    <div class="rmss">
        <h3>热门搜索</h3>
        <div class="zy">
            <div>
                <a href="">
                    <p>1</p>
                    <p>epic</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>2</p>
                    <p>永劫无间</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>3</p>
                    <p>霓虹深渊</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>4</p>
                    <p>荒野大镖客2</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>5</p>
                    <p>apex</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>6</p>
                    <p>四海兄弟</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>7</p>
                    <p>死亡搁浅</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>8</p>
                    <p>战地2042</p>
                </a>
            </div>
        </div>
        <h3>热议中</h3>
        <div class="zy">
            <div>
                <a href="">
                    <p>1</p>
                    <p>#epic特卖游戏推荐#</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>2</p>
                    <p>#黑盒圣诞通行证#</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>3</p>
                    <p>#NS回忆展#</p>
                </a>
            </div>
            <div>
                <a href="">
                    <p>4</p>
                    <p>#epic#</p>
                </a>
            </div>
        </div>
    </div>
</body>
</html>